现在来看下闻名已久的vuex时间旅行能力:
通过vuex的执行的操作会被记录下来
可以选择操作记录,返回回退到此操作时的状态
因为vuex,状态的时间旅行称为可能。举例说,比如我的一个状态值为0,做了四次加1,如果我选择回退到第二次操作,那么状态值会恢复到2。
这次使用的代码来自于: https://segmentfault.com/a/11... 。文件名为vuex.html,现在可以使用一个简单的web服务把此页面共享出去。
var http = require('http');
var fs = require('fs');
var file = 'vuex.html'
var index = fs.readFileSync(file);
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(index);
}).listen(8080);
你需要首先安装vue-devtools,然后访问localhost:8080,可以看到vue-devtools的V型图标从默认的灰色变成彩色,点击此图标,会提示:
Vue.js is detected on this page. Open Chrome Devtools and look for the Vue panel.
按此提示,打开Chrome Devtools,查看Vue面板,可以在右上方看到Vuex。点击它就可以开始状态的时间旅行了。
点击按钮+四次,可以看到左边的列表(状态列表)变成5条,从Base State到4个inc。界面数字变成4
点击第二个inc,就可以看到状态列表内变成3条,从Base State到2个inc。
而界面上的数字变成2
多点几次可以看到状态值counter确实是可以在多个操作中拣选的
注意:这次我们使用了一个简单的node服务器来伺服vuex.html,而不是直接通过file://
协议打开文件。后者确实可以使用,但是vue-devtools并不能检测到此demo采用了vue。如果想要它可以检测的话,必须在chrome插件页针对vue-devtools打开选项运行访问文件网址
。
作者:刘传君
做过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我
出品
bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。